<template>
  <div>
    <div class="top">
      关键字
      <el-input v-model="input" placeholder="根据文章标题搜索"></el-input>
      状态
      <el-select v-model="value" placeholder="请选择">
        <el-option label="启用" :value="2"></el-option>
        <el-option label="禁用" :value="3"></el-option>
      </el-select>
      <el-button>清空</el-button>
      <el-button type="primary">搜索</el-button>
      <el-button type="success" @click="addskillfn"> 新增技巧 </el-button>
    </div>
    <div>
      <el-alert type="info" :closable="false" class="incoTitle">
        <i class="el-icon-info" style="font-size: 16px"></i>
        数据一共{{ total }}条
      </el-alert>
    </div>
    <div>
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            type="index"
            :index="indexfn"
            label="序号"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="180">
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="180">
          </el-table-column>
          <el-table-column prop="username" label="录入人" width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="录入时间"
            width="180"
            sortable=""
          >
            <template #default="{ row }">
              {{ row.createTime | timefilter('YYYY年MM月DD日') }}
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            :formatter="formatterFn"
            label="状态"
            width="180"
          >
          </el-table-column>

          <el-table-column prop="name" label="操作" width="180">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="yulanfn(row.id)">
                预览
              </el-button>
              <el-button
                v-if="row.state === 1"
                type="text"
                size="small"
                @click="jinyongfn(row.id, 0)"
              >
                禁用
              </el-button>
              <!-- <div>{{ row }}</div> -->
              <el-button
                type="text"
                v-else
                size="small"
                @click="jinyongfn(row.id, 1)"
              >
                启用
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1 ? true : false"
                size="small"
                @click="editartfn(row.id)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1 ? true : false"
                size="small"
                @click="delartfn(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页组件 -->
      <div class="block">
        <!-- <el-pagination layout="prev, pager, next" /> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[3, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 预览碳层 -->
    <div>
      <el-dialog title="预览文章" :visible.sync="dialogFormVisible">
        <template>
          <div v-for="item in tableData" :key="item.id">
            <div v-if="item.id === articeid">
              <h1>{{ item.title }}</h1>
              <span>{{ item.createTime }}</span>
              <span>{{ item.username }}</span>
              <span>{{ item.visible }}</span>
              <div v-html="item.articleBody"></div>
            </div>
          </div>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"> 确 定 </el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 添加碳层 -->
    <div class="tianjia">
      <el-dialog :title="title" :visible.sync="dialogFormVisible1">
        <el-form :model="form" ref="addForm" :rules="addRules">
          <el-form-item
            label="文章标题"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input
              v-model="form.title"
              placeholder="请输入文章标签"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="文章内容"
            :label-width="formLabelWidth"
            prop="articleBody"
          >
            <RichText v-model="form.articleBody"></RichText>
            <!-- <el-input></el-input> -->
          </el-form-item>
          <el-form-item label="视频地址" :label-width="formLabelWidth">
            <el-input
              v-model="form.videoURL"
              placeholder="请输入视频地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="addsubmitfn"> 确 定 </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getartListapi,
  addartapi,
  edituserapi,
  delartapi,
  editartapi,
  editnewartapi
} from '@/api/interview'
// import { timefilter } from '@/filter/index'
export default {
  data() {
    return {
      input: '',
      value: '',
      total: 0,
      articeid: '',
      tableData: [],
      page: 1,
      pagesize: 10,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      isuser: false,
      isdisable: false,
      formLabelWidth: '120px',
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },

      addRules: {
        title: [
          {
            required: true,
            message: '请输入文章标题',
            trigger: ['blur', 'change']
          }
        ],
        articleBody: [
          {
            required: true,
            message: '请输入内容',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  async created() {
    this.getarticlelistfn()
  },
  computed: {
    title() {
      return this.form.id || this.form.id === null ? '编辑文章' : '添加文章'
    }
  },
  methods: {
    async getarticlelistfn() {
      const res = await getartListapi()
      this.tableData = res.data.items
      this.total = +res.data.counts

      console.log(this.tableData)
    },
    addskillfn() {
      this.dialogFormVisible1 = true
    },
    formatterFn(row, column, cellValue) {
      if (cellValue === 1 || cellValue === '1') {
        // this.content = '禁用'
        return '已启用'
      } else if (cellValue === 0 || cellValue === '0') {
        // this.content = '启用'
        return '禁用'
      }
      return cellValue
    },
    async addsubmitfn() {
      if (this.form.id) {
        await editnewartapi(this.form)
        this.$message.success('编辑成功')
      } else {
        await addartapi(this.form)
        this.$message.success('添加成功')
      }

      this.getarticlelistfn()
      this.form = {}
      this.dialogFormVisible1 = false
    },
    async jinyongfn(id, state) {
      //   if (state === 0) {
      //     this.isdisable = true
      //   } else {
      //     this.isdisable = false
      //   }
      await edituserapi(id, state)
      this.getarticlelistfn()
    },
    async delartfn(id) {
      await delartapi(id)
      this.getarticlelistfn()
    },
    yulanfn(id) {
      this.dialogFormVisible = true
      this.articeid = id
    },
    async editartfn(id) {
      this.dialogFormVisible1 = true
      const res = await editartapi(id)
      this.form = res.data
      console.log(res)
    },
    // 每页条数变化，切换每页条数
    handleSizeChange(val) {
      this.pagesize = val
      this.page = 1
      this.getuserlistfn()
      console.log(`每页 ${val} 条`)
    },
    // 改变当前页执行
    handleCurrentChange(val) {
      this.page = val

      this.getuserlistfn()
      console.log(`当前页: ${val}`)
    },
    indexfn(index) {
      return index + 1 + (this.page - 1) * this.pagesize
    }
  }
}
</script>

<style scoped lang="scss">
.el-input {
  width: 200px;
  margin: 10px;
}
.top {
  margin-left: 20px;
}
.el-select {
  margin-right: 20px;
}
.el-button--success {
  position: absolute;
  right: 20px;
  top: 10px;
}
.block {
  margin: 20px;
  display: flex;
  justify-content: flex-end;
}
.tianjia {
  .el-input {
    width: 500px;
    margin: 10px;
  }
}
</style>
